<script lang="ts" setup>

import { onMounted, ref, onBeforeMount } from 'vue';

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
    },

]
const currentPage2 = ref(5)
const pageSize2 = ref(100)
const size = ref(10)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

</script>
<template>
    <el-table :data="tableData" align="left" header-row-class-name="headerName" :border="false" style="width: 100%">
        <el-table-column prop="date" label="科室名称"></el-table-column>
        <el-table-column prop="date" label="专业认证"></el-table-column>
        <el-table-column prop="date" label="是否NMPA认证"></el-table-column>
        <el-table-column prop="date" label="链接"></el-table-column>
        <el-table-column prop="date" label="科室介绍">
            <template #default="scope">
                <span style="color: #0C9397;cursor: pointer;">查看</span>

            </template>

        </el-table-column>

    </el-table>
    <div class="pagination">
        <el-pagination v-model:current-page="currentPage2" v-model:page-size="pageSize2"
            :page-sizes="[10, 200, 300, 400]" :size="size" :background="true" layout="prev, pager, next,sizes,"
            :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<style scoped lang="scss">
.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

h3 {
    margin: 20px 0;
    font-size: 16px;
    color: #333333;
    position: relative;
    padding-left: 8px;
}

h3::before {
    position: absolute;
    clear: both;
    width: 3px;
    height: 16px;
    content: '';
    left: 0px;
    background-color: #0C9397;
}
</style>